<template>
    <div class="home">
        <header>
            <div class="icon">
                <img src="../assets/ft_logo.png" alt="" />
            </div>
            <div clas="search_box">
                <form method="post" action class="sear_form">
                    <img src="../assets/ico_search.png" alt="" class="sear_icon" />
                    <input type="text" placeholder="输入商品名称"  class="search"/>
                </form> 
            </div> 
        </header>
        <div class="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href=""><img src="../assets/2zhognxiyao0419.jpg" alt=""></a></div>
                    <div class="swiper-slide">
                        <a href=""><img src="../assets/2zhongxiyao0424.jpg"  alt=""></a></div>
                    <div class="swiper-slide">
                        <a href=""><img src="../assets/3zhongxiyao0424.jpg" alt=""></a></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="type">
            <ul class="type_ul">
                <li><img src="../assets/qingsong11.png" alt="">
                    <div>轻松找药</div></li>
                          
                <li><img src="../assets/nanke_(1).png" alt="">
                <div>男性</div></li>
                <li><img src="../assets/fukeicon.png" alt="">
                <div>女性</div></li>
                <li><img src="../assets/wo-0815.png" alt="">
                <div>我</div></li>
                <li><img src="../assets/manxingbing.png" alt="">
                    <div>慢性</div></li>
                <li><img src="../assets/zibuicon.png" alt="">
                    <div>滋补调养</div></li>
                <li><img src="../assets/lianxian.png" alt="">
                    <div>连线名医</div></li>
                <li><img src="../assets/fenleiicon.png" alt="">
                <div>分类</div></li>
            </ul>
        </div>
        <div class="item_logo">
            <ul>
                <li>
                    <router-link to="/homeSec">
                        <img src="../assets/1qiqiang0519.jpg" alt="">
                    </router-link>
                </li>
                <li>
                    <router-link to="/homeSec">
                        <img src="../assets/h5kouchao0118.jpg" alt="">
                    </router-link>
                </li>
                <li>
                    <router-link to="/homeSec">
                        <img src="../assets/manbing0519_(2).jpg" alt="">
                    </router-link>
                </li>
                <li>
                    <router-link to="/homeSec">
                        <img src="../assets/xiaoyaox0519.jpg" alt="">
                    </router-link>
                </li>
            </ul>
        </div>
        <div class="item_logo1">
            <div class="logo_img"><img src="../assets/h5donge0328.jpg" alt=""></div>
            <ul class="img_ul">
                <li><img src="../assets/h5chengren0328.jpg" alt=""></li>
                <li><img src="../assets/h5yaozhuang0217.jpg" alt=""></li>
            </ul>
        </div> 
        <div class="item_logo1">
            <div class="logo_img"><img src="../assets/yizhen0304.jpg" alt=""></div>
            <ul class="img_ul">
                <li><img src="../assets/h5yinxing0223.jpg" alt=""></li>
                <li><img src="../assets/h5jianfei.jpg" alt=""></li>
            </ul>
        </div>
        <div class="footer">
            <p>广东壹号大药房连锁有限公司 020-31067218</p>
            <p>地址:广东省广州市越秀区共和西路1号2层</p>
        </div> 
    </div>
</template>
import swiper from '../../static/swiper.min.css'
import Swiper from '../../static/swiper.min.js'

<script>
export default {
    name: 'hello',
    data () {
       return {
       }   
    },
    mounted() {
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: 1000,//可选选项，自动滑动(时间:毫秒)
            loop : true,//循环
            pagination : '.swiper-pagination' //分页器
        })
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

header{
    height: 1.2rem;
    width: 100%;
    position: fixed;
    top: 0;
    background-color: #0093e7;
    min-height: 47px;
    z-index: 5;
}
header h1{
    font-size: .48rem;
    font-weight: normal;
    text-align: center;
    color: #fff;
    line-height: 1.2;
    padding-top: .32rem;
}
header h1::before{
    content: " \e6b0";
    font-family: 'iconfont'; 
    position: absolute;
    left: .134rem;
    top: .134rem;
    font-size: .88rem;
}
.icon img{
    width: .8rem;
    height: .853rem;
    position: absolute;
    left: .26667rem;
    top: .187rem;
}
.search{
    width: 50%;
    height: .9333rem;
    font-size: .35rem;
    border-radius: .11rem;
    margin: .08rem 0;
    padding-left: 1rem;
    position: absolute;
    left: 2rem;
    top: 0;
    z-index: 5;
    outline: none;
}
.sear_icon{
    width:  .48rem;
    height:  .48rem;
    position: absolute;
    left: 2.4rem;
    top: .4rem;
    z-index: 10;
}
.swiper-slide img{
    width: 100%;
}
.banner{
    margin-top: 1.2rem;
}
.type_ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    border-bottom: 1px solid #f3f3f3;
}
.type_ul li{
    width: 25%;
    margin-top: .2rem;
    padding-bottom: .27rem;
}
.type_ul li div{
    font-size: .37rem;
}
.type_ul li img{
    width: 1.2rem;
}  
.item_logo ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background: #f3f3f3;
    padding: .3rem 0;
    font-size: 0;
} 
.item_logo ul li{
    width: 50%;
    border-bottom: 1px solid #f3f3f3;
}
.item_logo ul li img{
    width: 4.97rem;
    height: 2.43rem;
}
.item_logo1{
    display: flex;
    height: 4.9rem;
    background: #f3f3f3;
    font-size: 0;
    padding-bottom: 2.7%;
}
.item_logo1 .logo_img, .img_ul{
    width: 50%;
}
.item_logo1 .logo_img img{
    height: 4.82rem;
}
.item_logo1 .img_ul li{
    border-bottom: 1px solid #f3f3f3;
}
.item_logo1 .img_ul img{
    height: 2.4rem;
}
.footer{
    padding-bottom: 2rem;
    background: #f3f3f3;
    text-align: center;
    color: #a5a5a5;
    font-size: .35rem;
}

</style>
